<template>
    <div class="h-full flex">
        <div class="flex">
            <div v-if="state.store.config.isDark" class="pr-1 pl-1 cursor-pointer hover:opacity-80">
                <sysIcon @click="changeTheme" class="link" type="system-yueliang" />
            </div>
            <div v-else class="pr-1 pl-1 cursor-pointer hover:opacity-80">
                <sysIcon @click="changeTheme" class="link" type="system-taiyang" />
            </div>
            <div class="pr-2 pl-1 cursor-pointer hover:opacity-80" @click="state.store.model.themeShow = true">
                <sysIcon class="link" type="system-pifu" />
            </div>
        </div>
        <div @click.prevent class="truncate flex-center pr-4 pl-2">
            <img v-if="state.store.users && state.store.users.avatar" class="rounded" style="width: 28px; height: 28px; line-height: 28px; margin-right: 8px" :src="state.store.users.avatar" />
            <a-avatar shape="square" v-else :style="state.store.config.menuTheme === 'dark' ? 'width:28px;height:28px;line-height:28px; margin-right:8px;' : 'width:28px;height:28px;line-height:28px; margin-right:8px;'">{{ state.store.users && state.store.users.name ? state.store.users.name.charAt(0) : '' }}</a-avatar>
            <div>{{ state.store.users.name }}</div>
        </div>
        <!-- <a-dropdown>
            <div @click.prevent class="truncate flex-center cursor-pointer pr-4 pl-4 link">
                <img v-if="state.store.users && state.store.users.avatar" class="rounded-full" style="width: 28px; height: 28px; line-height: 28px; margin-right: 8px" :src="state.store.users.avatar" />
                <a-avatar shape="square" v-else :style="state.store.config.menuTheme === 'dark' ? 'width:28px;height:28px;line-height:28px; margin-right:8px;background:rgba(255,255,255,0.15);' : 'width:28px;height:28px;line-height:28px; margin-right:8px;'">{{ state.store.users && state.store.users.name ? state.store.users.name.charAt(0) : '' }}</a-avatar>
                <div>{{ state.store.users.name }}</div>
            </div>
            <template #overlay>
                <a-menu>
                    <a-menu-item key="0" @click="clearCookie"> <sysIcon type="system-qingchuhuancun" class="mr-2" />清理缓存 </a-menu-item>
                    <a-menu-item key="3" @click="logOut"> <sysIcon type="system-exit" class="mr-2" />退出系统 </a-menu-item>
                </a-menu>
            </template>
        </a-dropdown> -->
    </div>
</template>
<script setup>
let state = reactive({
    store: useStore(),
    router: useRouter(),
    isDev,
})

function changeTheme() {
    if (!state.store.config.isDark) state.store.config.menuTheme = 'normal'
    state.store.config.isDark = !state.store.config.isDark
    if (state.store.config.isDark) {
        document.documentElement.classList.add('dark')
    } else {
        document.documentElement.classList.remove('dark')
    }
}
if (state.store.config.isDark) {
    document.documentElement.classList.add('dark')
} else {
    document.documentElement.classList.remove('dark')
}

// 退出系统
function logOut() {
    axios.postForm('/user/loginAndOut/logout').then(res => {
        if (res.code === '200') {
            // state.store.token = "";
            state.store.users = {}
            state.router.replace('/login')
        }
    })
}

//清除缓存
function clearCookie() {
    localStorage.removeItem('dd_swa_business')
    localStorage.removeItem('dd_swa_menu')
    localStorage.removeItem('dd_swa_config')
    localStorage.removeItem('dd_swa_table')
    localStorage.removeItem('VXE_MODAL_POSITION')
    localStorage.removeItem('VXE_TABLE_CUSTOM_COLUMN_WIDTH')
    message.success('正在清理')
    setTimeout(() => {
        state.router.go(0)
    }, 800)
}

const {} = toRefs(state)
</script>
